Batch 2 - Class 21 - App Inventor Session 1

Attendance: Smiti, Muskaan, Aastha, Hriday, Kushaan, Tishyaa, Anisha, Avy, Aryan, Rhea

Class Notes:

Setup your Device https://sites.google.com/site/cs107f14/setup
  1. Connect to WiFi. Choose Settings | WiFi and enable it. If you are in USF Harney 235 or 5th floor Harney, connect to CSLabs.
  2. Verify Connection. In a browser, open some page (e.g., google.com) to verify that you are connected.
  3. Login to your device. Click on the Play Store app. If you haven't logged in to the device yet, you'll be asked for your Google Account information. 
  4. Install the MIT AI2 Companion. Open the Play Store, search for the MIT AI2 Companion, then install it. You'll use this to test your apps.
  5. Install a QR code scanner. If you don't have a QR code scanner, install one from the Play Store. ZXing is a commonly used one.
  6. Allow "Unknown Sources". Choose Settings | Security, then scroll down and check "Unknown Sources". This will allow you to install apps from places other than the Play Store (like the ones you build).
  7. Screen Size (Samsung Tabs only): Galaxy Tabs sometimes show apps in a small window and don't use full screen. If your tablet is doing this, you need to download an app called Spare Parts and modify some settings. For instructions, see this video:
     https://www.youtube.com/watch?v=zasSIA7sexM

Test your Apps

Setup your computer to connect with your device.
  1. Connect to WiFi. Make sure you computer is connected to the same WiFi connection as your device.
  2. Open App Inventor. Go to ai2.appinventor.mit.edu in a browser on your computer.
  3. Create a new Project. If you don't have any projects, create a new one.
  4. Connect your computer and device. In the App Inventor menu, choose Connect | AI Companion. A QR code should appear. On your device, open the MIT AI2 Companion, then choose Scan QR Code. Place your device up to the QR Code on the computer and scan it.
  5. Try your App. The app you are creating should appear on your device. As you make changes in App Inventor, they'll appear on the device. Try changing the Screen.Title or some other property!
  6. Problem? If you have a problem connecting over WiFi, you can test your app by installing it (see below). You can connect using a USB chord and use an emulator. For instructions and troubleshooting help, check out http://appinventor.mit.edu/explore/ai2/setup.html

Install your App

When you live test your app with the MIT AI2 Companion, the app is not really installed on your phone. You can install an app in the following manner:
  1. In App Inventor, choose Build | App (provide QR code for .apk.
  2. When the QR code appears, scan it onto your device with a QR Code scanner (e.g., ZXing) and NOT with the MIT AI2 Companion.
  3. The app will install and appear in your list of apps forever (or at least until you remove it).

Publish your App http://www.appinventor.org/appPage 

  1. Create Google Sites Portfolio Page http://www.appinventor.org/portfolio 
    1. Get a Google Account and Register for Sites. In a browser, go to sites.google.com If you have a Google account login. If not, click 'Sign up for Sites' and register with Google.
    2. Create a New Site. When you've successfully logged in to Google Sites, click on "CREATE" and follow the process
  2. Give your app a descriptive project name, title and icon
  3. Dowload your app APK (and source code, optional)
  4. Create a project page for your app on Google Sites, and upload the apk/apa files there
  5. Create a QR code for the app on http://www.the-qrcode-generator.com - add it to portfolio page (you may also add source code link, and screenshots on portfolio page)
  6. Install the app on your phone using QR code and ZXing

Build your First App - I have a dream http://www.appinventor.org/apps2/IHaveADream/IHaveADream.pdf
  1. Download "I have a dream" app from http://www.appinventor.org/starterApps on your computer and import into AI - you get a screen and designer interface, and media files
  2. Drag a button, and put an image on it. Remove the text
  3. Pull out a player from Media drawer, and attach its source to king.mp3
  4. Get the app to show up on AI Companion - the app still doesn't play - we need behavior
  5. click on Blocks on top right, and pull out the button1.click event - make sure kids understand events
  6. Exercise: Add Malcolm and his speech - Use Horizontal layout block and smaller image for King. Rename components so that they are easily distinguishable
  7. What is the problem? How can we solve it?
  8. Add If-then-else to King button. Test. Explain Conditionals and State. Ask kids to add if-then-else to Malcolm.
  9. What is the problem?  Ask kids to suggest how we solve the interaction between King and Malcolm?
  10. Let kids add code to stop each speech when other is played
  11. Publish the app as above


Homework


  1. Read/watch the following Learning Nuggets:
    1. http://www.appinventor.org/Events
    2. http://www.appinventor.org/Conditionals
  2. Read some interesting articles about app building, coding, and App Inventor. There is a list and discussion questions here: http://appinventor.org/biblio